<template>
  <div class="hello">
    <div class="textBox" :style="{height:winHeight+'px'}">
      <img :src="imgPath" :val="imgValue" class="imgValues">
    </div>
    <div class="btnBox">
      <!-- <button class="btn" data-clipboard-text="imgValue">
            Copy to clipboard
        </button> -->
      <a class="copytext btn" id="btn">复制这段文字</a>
      <a class="play" @click.stop="play">我也要玩</a>
    </div>
  </div>
</template>

<script>
  import Clipboard from "clipboard";
  export default {
    name: "HelloWorld",
    data() {
      return {
        msg: "Welcome to Your Vue.js App",
        winHeight: window.innerHeight,
        list: [{
            img: "/static/img/1.png",
            val: "别人笑起来的样子很好看 你笑起来的样子很好笑"
          },
          {
            img: "/static/img/2.png",
            val: "被再说自己是单身狗了，你这个年纪狗都死了。"
          },
          {
            img: "/static/img/3.png",
            val: "多照照镜子，很多事情你就能明白原因了。"
          },
          {
            img: "/static/img/4.png",
            val: "你复杂的五官，掩饰不了你朴素的智商。"
          },
          {
            img: "/static/img/5.png",
            val: "你会不会突然的出现，在街角的大保健店~"
          },
          {
            img: "/static/img/6.png",
            val: "你认真的样子，就像天桥上贴膜的..."
          },
          {
            img: "/static/img/7.png",
            val: "你所有为人称道的美丽，都有美图秀秀的痕迹"
          },
          {
            img: "/static/img/8.png",
            val: "青春荒唐不负你，全套包夜八百起"
          },
          {
            img: "/static/img/9.png",
            val: "如果再见不能红着脸，是否还能借点钱"
          },
          {
            img: "/static/img/10.png",
            val: "虽然你长得丑，但你想的美啊"
          },
          {
            img: "/static/img/11.png",
            val: "为了节约用水，今晚可以一起洗澡吗？"
          },
          {
            img: "/static/img/12.png",
            val: "我来到你的城市，你却不管顿饭吃"
          },
          {
            img: "/static/img/13.png",
            val: "我们要再见面了，洗头好累，洗发水好贵"
          },
          {
            img: "/static/img/14.png",
            val: "我喜欢你，就像你妈打你不讲道理"
          },
          {
            img: "/static/img/15.png",
            val: "希望一切事情，都像长胖那么容易"
          },
          {
            img: "/static/img/16.png",
            val: "一直非常羡慕我的那朋友，他有一个世界上最好的女朋友"
          },
          {
            img: "/static/img/17.png",
            val: "以后的路你自己走，我打车"
          },
             {
            img: "/static/img/18.png",
            val: "轻轻的我走了，正如我轻轻的来,轻轻的我挥一挥手，不带走你一分钱财"
          },
             {
            img: "/static/img/19.png",
            val: "如果你有梦想，就要去睡觉"
          },
             {
            img: "/static/img/20.png",
            val: "只有通过别人的表情，才能真正地了解自己"
          }
        ],
        imgPath: "",
        imgValue: ""
      };
    },
    mounted() {
      let that = this;
      let num = parseInt(Math.random() * 20);
      that.imgPath = that.list[num].img;
      that.imgValue = that.list[num].val;
      var clipboard = new Clipboard(document.getElementById("btn"), {
        text: function() {
          return $(".imgValues").attr("val");
        }
      });
      clipboard.on("success", function() {
     alert("复制成功，去评论吧")
      });
      clipboard.on("error",function(){
        alert("复制失败，刷新页面从新复制")
      })
    },
    created() {

    },
    methods: {
      play:function(){
        window.location.href=("https://mp.weixin.qq.com/s/IvpI7h6zOrbpNmIhe0bafg")
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
